<template>
	<view>
		<view class="map_container">
			<map :class="['map']" :longitude="longitude" :latitude="latitude" :scale="14" :show-location="true"
				@regionchange="regionchange" id="map"></map>
			<view class="dw" @click="clickcontrol(firstLat, firstLng, 'origin')">
				<image src="/static/icon/xdw.png" mode="" ></image>
			</view>
			<image class="marker_icon" src="/static/icon/dw.png" mode=""></image>
		</view>
		<view class="bottom_block">
			<view class="search_top">
				<uni-icons type="search" size="24" color="#D1CDCD"></uni-icons>
				<input placeholder-class="inputclass" placeholder="搜索" v-model="searchKey" confirm-type="search"
					@confirm="handelSearch" />
				<uni-icons v-if="showClearIcon" color="#D1CDCD" type="clear" size="24" @click="clearIcon"></uni-icons>
			</view>
			<scroll-view scroll-y class="address-list">
				<view class="address-list-item" v-for="(item,index) in searchAddressList" :key="index">
					<view>
						<text
							class="tip-titile">{{ item.pname }}{{ item.cityname }}{{ item.adname }}-{{ item.name }}</text>
						<text class="tip-address">{{ (+item.distance).toFixed(0) }}m | {{ item.address }}</text>
					</view>
					<view class="" @click="sureAddress(item)">
						<uni-icons type="plus-filled" color="#000" size="22"></uni-icons>
					</view>
				</view>
				<uni-load-more :status="statusshow"></uni-load-more>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import QQMapwx from '@/minxins/amap-wx.130.js'
	export default {
		data() {
			return {
				showClearIcon: false,
				longitude:'',
				latitude:'',
				addressList: '',
				searchAddressList: [],
				searchKey: '',


				changeType: '',
				firstLat:'',
				firstLng:'',
				statusshow:'loading',
			}
		},
		watch: {
			searchKey(newval) {
				if (newval != '') {
					this.showClearIcon = true
				} else {
					this.showClearIcon = false
				}
			}
		},
		onLoad() {
			this.firstLng = uni.getStorageSync('address').longitude
			this.firstLat = uni.getStorageSync('address').latitude
			this.clickcontrol(this.firstLat,this.firstLng,'origin')
		},
		methods: {
			//左下角定位按钮的点击事件
			clickcontrol(lat, lng, type) {
				uni.createMapContext("map", this).moveToLocation({
					//moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
					latitude: lat,
					longitude: lng,
				});
				if (type === "origin") {
					this.listLoading = true;
					this.formatLocation(lat, lng);
				}
			},
			regionchange(e) {
				//视野变化的方试:causedBy : "update" "drag"
				if (e.type === "end") {
					this.changeType = e.causedBy;
					this.getCenterLatLong();
				}
			},
			// 获取中心点位置
			getCenterLatLong() {
				if (this.changeType === "drag") {
					let that = this;
					let mapCtx = uni.createMapContext("map", this);
					mapCtx.getCenterLocation({
						success: (res) => {
							console.log(res);
							const latitude = res.latitude;
							const longitude = res.longitude;
							if (
								that.longitude - longitude < 0.000005 &&
								that.longitude - longitude > 0 &&
								latitude == that.latitude
							) {
								// 对静态移动标点做限制防止偏移
								return;
							}
							if (that.scrollTimer) {
								// 设置节流，进一步限制高频触发
								clearTimeout(that.scrollTimer);
							}
							that.listLoading = true;
							that.scrollTimer = setTimeout(() => {
								that.latitude = latitude;
								that.longitude = longitude;
								that.formatLocation(res.latitude, res.longitude);
							}, 1500);
						},
						fail: (res) => {
							console.log("失败", res);
						},
					});
				}
			},
			handelSearch() {
				this.formatLocation()
			},
			// 转换地点
			formatLocation(latitude, longitude) {
				const that = this;
				const qqmapsdk = new QQMapwx.AMapWX({
					key: 'fec30c445693bf6e07f0c753a07d9667'
				})
				qqmapsdk.getPoiAround({
					location: longitude + ',' + latitude,
					querykeywords: this.searchKey,
					success: (data) => {
						this.searchAddressList = data.poisData; // 将搜索回来的数据放在列表中显示
						this.statusshow = 'no-more'
					},
					fail: (data) => {
						this.statusshow = 'no-more'
					},
				})
			},
			// // 用户点击取消按钮（搜索列表页）
			clearIcon() {
				this.searchKey = '' // 清空搜索内容
				this.searchAddressList = [] // 清空搜索列表
				
			},
			// 用户点击下方列表选项
			sureAddress(ev) {
				console.log(ev);
				const [longitudeStr, latitudeStr] = ev.location.split(',');
				this.longitude = parseFloat(longitudeStr); // 将字符串转换为浮点数
				this.latitude = parseFloat(latitudeStr);
				// 更改标记点
				this.markers = [{
					id: 1,
					latitude: this.latitude, // 正确地使用了latitude变量
					longitude: this.longitude, // 正确地使用了longitude变量
				}];
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
		overflow: hidden;
	}

	.map_container {
		width: 100%;
		/* 计算总的高度，减去底部空间，然后取45% */
		height: 40vh;
		position: relative;

		.map {
			width: 100%;
			/* 计算总的高度，减去底部空间，然后取45% */
			height: 40vh;
		}
		.dw{
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			bottom: 40rpx;
			background: #fff;
			border-radius: 10rpx;
			left: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.marker_icon {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 40rpx;
			height: 40rpx;
		}
	}
	.map_text {
		background: #fff;
		padding: 0 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	text {
		margin: 5px 0;
		display: block;
		font-size: 12px;
	}
	.h1 {
		margin: 15px 0;
		font-size: 15px;
	}
	.bottom_block {
		padding: 20rpx;
		box-sizing: border-box;
		height: 58vh;
		overflow: hidden;
		.search_top {
			width: 100%;
			height: 80rpx;
			background: #eee;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 22rpx;
			box-sizing: border-box;
			.inputclass {
				font-weight: 500;
				font-size: 28rpx;
				color: #D1CDCD;
			}

			input {
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
			}
		}

		.address-list {
			overflow-y: auto;
			height: calc(60vh - 80rpx);
			overflow: hidden;
			/* 添加滚动条 */
			.address-list-item {
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}


	}
</style>